import React, { useState, useEffect, useMemo } from 'react';
import Head from 'next/head';
import { Row, Col, List, Input, Select, Avatar, Modal } from 'antd';
import Header from '../components/header';
import Footer from '../components/footer';
import Bgc from '../components/bgc';
import cssLive from '../static/style/pages/live.scss';
import API from '../util/apiUrl';

const Live = (props) => {
  console.log('Live props', props, 'cssLive', cssLive);

  const [bgcUrl, setBgcUrl] = useState({});
  const [isShowImg, setIsShowImg] = useState('');

  useEffect(()=>{
    showTop()
    document.addEventListener('scroll', scrollListener);
    return () => {
      document.removeEventListener('scroll', scrollListener);
    };
  },[])

  const ShowImg = ({ img }) => {
    // console.log('img', img);
    return (
      <div
        className={cssLive.showImg}
        onClick={() => {
          setIsShowImg('');
        }}
      >
        <img src={img} alt="" />
      </div>
    );
  };

  // 直接显示顶部
  const showTop=()=>{
    document.body.scrollTop = document.documentElement.scrollTop = 0
  }

  // 滚动到文章位置
  const scrollTo = (id) => {
    let domY = document.getElementById(id).getBoundingClientRect().top - 55 + window.pageYOffset;
    window.scrollTo({
      top: domY,
      behavior: 'smooth', //  smooth(平滑滚动),instant(瞬间滚动),默认auto
    });
  };

  // 图片动画
  const scrollListener = () => {
    let winHeight = window.innerHeight;
    let doms = document.querySelectorAll('.itemImg');
    doms.forEach((i, idx) => {
      if ((i.getBoundingClientRect().top-(i.offsetHeight/3)) < winHeight) {
        i.style.transform = 'scale(1)';
      } else {
        i.style.transform = 'scale(0)';
      }
    });
  };
  return (
    <>
      {isShowImg ? <ShowImg img={isShowImg} /> : null}
      <Head>
        <title>yzyの博客-生活</title>
        <link
          rel="shortcut icon"
          href="../static/img/bitbug_favicon.ico"
          type="image/x-icon"
        />
      </Head>

      <Header
        getBgcUrl={(data) => {
          setBgcUrl(data);
        }}
        current="3"
      />

      <Bgc bgcUrl={bgcUrl}
        scrollTo={(id) => {
          scrollTo(id);
        }}
        btns={[
          {
            name:'生活动态',
            id:'liveContent',
            icon:'icon-shenghuo'
          }
        ]} />
      {/* <div
        className={cssLive.bgcImg}
        // style={{ backgroundImage: `url(${bgcUrl.carousel_img})` }}
      >
        <div className={cssLive.content}>
          <div className={cssLive.title}>
            <h3>{bgcUrl.name}</h3>
            <span>一些文字..</span>
          </div>
        </div>
      </div> */}

      <div className={cssLive.common}>
        <Row className={cssLive.comm_main} justify="center">
          <Col className={cssLive.comm_home} span={24}>
            <div className={cssLive.content} id="liveContent">
              <List
                itemLayout="horizontal"
                dataSource={props.list.reverse()}
                renderItem={(item) => (
                  <>
                    <List.Item>
                      <List.Item.Meta
                        avatar={<Avatar src={item.avatar} />}
                        title={<div>
                          <div>{item.title}</div>
                          <i>{item.updateTime}</i>
                          </div>}
                        description={item.content}
                      />
                    </List.Item>
                    <div className={cssLive.imgList}>
                      {item.imgs
                        ? item.imgs.split(',').map((i, idx) =>{
                          let ysimg = i.split('.')
                          ysimg[ysimg.length-2]+='ys'
                          ysimg=ysimg.join('.')
                          return  (
                            <div
                              key={idx}
                              className={cssLive.img+' itemImg'}
                              style={{ backgroundImage: `url('${ysimg}')` }}
                              onClick={() => {
                                setIsShowImg(i);
                              }}
                            ></div>
                          )
                        })
                        : ''}
                    </div>
                  </>
                )}
              />
            </div>
          </Col>
        </Row>
      </div>
      <Footer />
    </>
  );
};

Live.getInitialProps = async () => {
  let res = await API.getLiveList();
  // console.log('res000', res);
  return { list: res.data.reverse() };
};

export default Live;
